<template>
	<view>
		<view class="margin-empty"></view>
		<view class="container">
			<view class="title">
				<view class="title-info">
					<image src="../../../static/errorImage.jpg" mode=""></image>
					<text class="colorfont font28">111</text>
				</view>
				<text class="font20 color999">2019-08-09</text>
			</view>
			<view class="colorfont font28">
顶顶顶顶顶
			</view>
			<view class="imgs">
				<image src="../../../static/emptyCart.jpg" mode="widthFix"></image>
			</view>
			<view class="spec">
				<text class="font24 color999">颜色:灰色 尺码:165/s</text>
				<view class="spec-info">
					<image src="../../../static/home/order/good_on.png" mode="widthFix"></image>
					<image src="../../../static/home/order/middle_on.png" mode="widthFix"></image>
					<image src="../../../static/home/order/bad_on.png" mode="widthFix"></image>
					<text class="font24 colorfont">好评</text>
					<text class="font24 colorfont">中评</text>
					<text class="font24 colorfont">差评</text>
				</view>
			</view>
			<view class="goods">
				<image src="../../../static/emptyCart.jpg" mode=""></image>
				<view class="goods-info">
					<view class="ttile">
						【狮子王联名】乐町可爱连帽短外套...狮子王联名】乐町可爱连帽短外套...
					</view>
					<view class="font30" style="color: #FE2130;">￥600</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad(option) {
			console.log(option)
			// this.loadDetail(this,option)
		},
		onShow() {

		},
		methods: {
			loadDetail(that,option){
				let data = {};
				let url = '';
				let method = '';
				if(option.type==0){
					data = {
						id:option.id
					}
					url = that.$requestApi.evaluateDetail;
					method = 'GET'
				}else{
					data = {
						cid:option.cid,
						goodsId: option.goodsId,
						orderId: option.orderId
					}
					url = that.$requestApi.afterEvaluate;
					method = 'POST'
				}
				that.$http.request({
						method: method, // 请求方法必须大写
						url: url,
						data: data
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							console.log(_data.result)
						}
					})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.margin-empty {
		width: 750upx;
		height: 20upx;
		background: rgba(245, 245, 250, 1);
	}

	.container {
		padding: 0 30rpx;
		position: relative;
		width: 100%;

		.title {
			margin: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title-info {
				display: flex;
				align-items: center;

				image {
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
					margin-right: 20upx;
				}
			}
		}
		.imgs{
			margin-top: 20upx;
			image{
				width: 100%;
				height: auto;
				margin-bottom: 35upx;
			}
		}
		.spec{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.spec-info{
				display: flex;
				align-items: center;
				image{
					width: 26upx;
					height: auto;
					margin-right: 10upx;
				}
			}
		}
		.goods{
			width: 100%;
			margin-top: 70upx;
			-webkit-box-sizing: border-box;
			        box-sizing: border-box;
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			width: 100%;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-webkit-flex-direction: row;
			    -ms-flex-direction: row;
			        flex-direction: row;
			background-color: #F5F5FA;
			padding: 20upx;
			image{
				width: 120upx;
				height: 120upx;
				border-radius: 10upx;
				margin-right: 20upx;
			}
			.goods-info{
				height: 120rpx;
				display: -webkit-box;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				    -ms-flex: 1;
				        flex: 1;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-webkit-flex-direction: column;
				    -ms-flex-direction: column;
				        flex-direction: column;
				-webkit-box-pack: justify;
				-webkit-justify-content: space-between;
				    -ms-flex-pack: justify;
				        justify-content: space-between;
				-webkit-box-align: start;
				-webkit-align-items: flex-start;
				    -ms-flex-align: start;
				        align-items: flex-start;
				overflow: hidden;
				// flex-wrap: wrap;
				flex-direction: column;
				.ttile{
					overflow: hidden;
					white-space: nowrap;
					-o-text-overflow: ellipsis;
					text-overflow: ellipsis;
					font-size: 28upx;
					width: 100%;
					color:#0B0E11;
				}
			}
		}
	}
</style>
